/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, BlobInputList,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {usePrefixDataEdit, usePrefixDataTable} from "../../hook/usePrefixData";

const input排烟={
  view:(orc:any, parentOrc:any)=>{
    return <Text>{orc?.排烟温?.m ?? '／'} ℃</Text>
  },
};
//【新配置模式】 pr前缀只能继承同一个列的前面几个连续同样设置的行的配置。 左边和右边两半列区是独立的。 或者设置pr:null就是去掉该前缀影响范围或者不是{}的标题也自动去掉继承性前缀。
export const config测试工况 = [
    //排烟温: 【联动的存储字段】 是在下面第四 数据综合表录入的；
  [['锅炉出力', {n:'锅炉力',t:'l',l:['日常运行工况']}], ['排烟温度', '_$排烟温', input排烟] ],
  [['出口介质温度', {n:'出介温',u:'℃'}], ['进口介质温度', {n:'进口介温',u:'℃'},] ],
  [['出口介质压力', {n:'出介压',u:'MPa'},],  ['进口介质压力', {n:'进介压',u:'MPa'},], ],
];

export interface Props extends InternalItemProps {
  iAname?: string[];
}
const 测试说明选=['1.锅炉使用燃料状况： \n' +
      '2.锅炉介质状况： \n' +
      '3.锅炉辅机状况： \n' +
      '4.锅炉系统状况： \n' +
      '5.锅炉机组布置：  \n' +
      '6.锅炉生产日期：   年  月，投用日期：   年   月； \n' +
      '7.燃料分析分包情况说明： \n' +
      '8.其他情况说明：',　 ];
export const itemA试工况: string[] = ['测试说明'];
export const TestInstruction=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:Props,  ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [renderEditline, itemACfg] = usePrefixDataEdit({
                 inp, setInp, config: config测试工况,  });
      const defvcbFunc = React.useCallback((par: any) => {
          // if(!par.测试说明)   par.测试说明=？;
        return  par;
      }, []);
      const itemA = React.useMemo(() => {
        return [...itemACfg, ...itemA试工况];
      }, [itemACfg]);
      const [getInpFilter]=useMeasureInpFilter(null,itemA,defvcbFunc);
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        {renderEditline}
        测试说明：
        <BlobInputList value={inp?.测试说明 || ''} rows={9} datalist={测试说明选}
                       onListChange={v => setInp({...inp, 测试说明: v || undefined}) } />
        { children }
      </InspectRecordLayout>;
  });


export const TestInstructionVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const renderUpper=usePrefixDataTable({config: config测试工况, orc, rep, slash:true,
         embed: { 0:  <CCell rowSpan={3}>测试工况</CCell>,  }
  });
  return <>
    <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
      <Text id='TestInstruction' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>二、测试工况及说明</Text>
      <div css={{display: 'flex', justifyContent: 'space-between'}}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table fixed={ ["5%","7%","6%","41%","7%","6%","%"] }
              css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
      <TableBody>
        <RepLink rep={rep} tag={'TestInstruction'}>
          {renderUpper}
          <TableRow>
            <CCell colSpan={7}>测试说明</CCell>
          </TableRow>
          <TableRow>
            <Cell split={true} colSpan={7}><div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
              {orc.测试说明 || '／'}
            </div></Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};
